<script setup>
import { ref } from 'vue'
// 导入 Swiper Vue.js 组件
import { Swiper, SwiperSlide } from 'swiper/vue'
// 导入所需模块
import {
  Pagination,
  Navigation,
  Scrollbar,
  Autoplay,
  EffectFade,
  EffectCoverflow,
  EffectFlip,
  EffectCube,
  FreeMode,
  Mousewheel
} from 'swiper/modules';
// 导入 Swiper 样式
import 'swiper/css'
import 'swiper/css/free-mode'
import 'swiper/css/scrollbar'

const swiperInstance = ref(null)

const items = ref([
  { content: '新闻资讯 1' },
  { content: '最新公告 2' },
  { content: '热点动态 3' },
  { content: '重要通知 4' },
  { content: '行业新闻 5' },
  { content: '公司动态 6' },
  { content: '产品更新 7' }
])

const modules = [Autoplay, FreeMode, Mousewheel, Scrollbar]

const autoplayOptions = {
  delay: 0,
  // disableOnInteraction: false,
  // pauseOnMouseEnter: true, // 鼠标悬停暂停
  // waitForTransition: false
}

const freeModeOptions = {
  enabled: true,
  momentum: false,
  sticky: true
}

const onSwiper = (swiper) => {
  swiperInstance.value = swiper
  console.log('Swiper initialized:', swiper)
}

const onSlideChange = () => {
  console.log('Slide changed')
}

const tree = ref({});

const treeVue3 = ref({
  root: {
    type: "object"
  }
});
</script>
<template>
<!--  <div class="vertical-swiper-container">
    <swiper
      :modules="modules"
      :direction="'vertical'"
      :loop="true"
      :autoplay="autoplayOptions"
      :speed="3000"
      :slides-per-view="'auto'"
      :space-between="20"
      :free-mode="freeModeOptions"
      :mousewheel="true"
      @swiper="onSwiper"
      @slide-change="onSlideChange"
      class="vertical-swiper"
    >
      <swiper-slide v-for="(item, index) in items" :key="index">
        <div class="slide-content">
          {{ item.content }}
        </div>
      </swiper-slide>

      &lt;!&ndash; 可选：添加自定义滚动条 &ndash;&gt;
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
  </div>-->

<JsonSchemaEditorJzl v-model="tree"/>

  ==={{ treeVue3 }}
  <JsonSchemaEditor :value="treeVue3" />
</template>

<style scoped>
.vertical-swiper-container {
  height: 400px; /* 容器高度 */
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  background-color: #f9f9f9;
}

.vertical-swiper {
  height: 100%;
}

.slide-content {
  height: 50px; /* 每个slide的高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 6px;
  margin: 10px 0;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  color: #333;
  transition: all 0.3s ease;
}

.slide-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 滚动条样式 */
.swiper-scrollbar {
  --swiper-scrollbar-size: 4px;
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  right: 2px;
  left: auto;
  width: 4px;
  background: rgba(0, 0, 0, 0.1);
}

/* 渐变遮罩效果 */
.vertical-swiper-container::before,
.vertical-swiper-container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 10;
  pointer-events: none;
}

.vertical-swiper-container::before {
  top: 0;
  background: linear-gradient(to bottom, #f9f9f9, transparent);
}

.vertical-swiper-container::after {
  bottom: 0;
  background: linear-gradient(to top, #f9f9f9, transparent);
}
::v-deep .swiper-slide {
  height: auto !important;
}
</style>
